<template>
  <div>
    <ul class="flex ul1 pw100 cf sb">
      <li class="bg1 mr20 flex_j column ft20 plr20 ptb20 tac">
        <p class="flex column">
          <i>销售额</i>
          <i class="mt10 nw">{{ inf.salesAmount }}元</i>
        </p>
        <p class="bdb mlr20 mtb10"></p>
        <div class="flex flex_sa">
          <p class="flex  column">
            <i>{{ inf.salesAmountM }}元</i>
            <i class="mt10 nw">本月销售额</i>
          </p>
          <p class="bdl mlr20"></p>
          <p class="flex  column">
            <i>{{ inf.salesAmountYD }}元</i>
            <i class="mt10 nw">昨日销售额</i>
          </p>
        </div>
      </li>
      <li class="bg2 mr20 flex_j column ft20 plr20 ptb20 tac">
        <p class="flex column">
          <i>订单数量</i>
          <i class="mt10 nw">{{ inf.orderConut }}单</i>
        </p>
        <p class="bdb mlr20 mtb10"></p>
        <div class="flex flex_sa">
          <p class="flex  column">
            <i>{{ inf.orderConutM }}单</i>
            <i class="mt10 nw">本月订单数</i>
          </p>
          <p class="bdl mlr20"></p>
          <p class="flex  column">
            <i>{{ inf.orderConutYD }}单</i>
            <i class="mt10 nw">昨日订单数</i>
          </p>
        </div>
      </li>
      <li class="bg3 mr20 flex_j column ft20 plr20 ptb20 tac">
        <p class="flex column">
          <i>退款Money</i>
          <i class="mt10 nw">{{ inf.refundAmount }}元</i>
        </p>
        <p class="bdb mlr20 mtb10"></p>
        <div class="flex flex_sa">
          <p class="flex  column">
            <i>{{ inf.refundAmountM }}元</i>
            <i class="mt10 nw">本月退款Money</i>
          </p>
          <p class="bdl mlr20"></p>
          <p class="flex  column">
            <i>{{ inf.refundAmountYD }}元</i>
            <i class="mt10 nw">昨日退款Money</i>
          </p>
        </div>
      </li>
      <li v-if="role == 2" class="bg1 mr20 flex_j column ft20 plr20 ptb20 tac">
        <p class="flex column">
          <i>Recharge Amount</i>
          <i class="mt10 nw">{{ inf.topupAmount }}元</i>
        </p>
        <p class="bdb mlr20 mtb10"></p>
        <div class="flex flex_sa">
          <p class="flex  column">
            <i>{{ inf.topupAmountM }}元</i>
            <i class="mt10 nw">本月Recharge Amount</i>
          </p>
          <p class="bdl mlr20"></p>
          <p class="flex  column">
            <i>{{ inf.topupAmountYD }}元</i>
            <i class="mt10 nw">昨日Recharge Amount</i>
          </p>
        </div>
      </li>
    </ul>
    <div class="flex mt10">
      <div class="bg6 flex_j column cf ph100 ft20  plr20 ">
        <i>生</i>
        <i class="mt10">鲜</i>
        <i class="mt10">柜</i>
      </div>
      <ul class="flex ul1 ml10 flex1 cf sb">
        <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
          <p class="flex column">
            <i>销售额</i>
            <i class="mt10 nw">{{ inf.eqSalesAmount }}元</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.eqSalesAmountM }}元</i>
              <i class="mt10 nw">本月销售额</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.eqSalesAmountYD }}元</i>
              <i class="mt10 nw">昨日销售额</i>
            </p>
          </div>
        </li>
        <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
          <p class="flex column">
            <i>订单数量</i>
            <i class="mt10 nw">{{ inf.eqOrderConut }}单</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.eqOrderConutM }}单</i>
              <i class="mt10 nw">本月订单数</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.eqOrderConutYD }}单</i>
              <i class="mt10 nw">昨日订单数</i>
            </p>
          </div>
        </li>
        <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
          <p class="flex column">
            <i>退款Money</i>
            <i class="mt10 nw">{{ inf.eqRefundAmount }}元</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.eqRefundAmountM }}元</i>
              <i class="mt10 nw">本月退款Money</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.eqRefundAmountYD }}元</i>
              <i class="mt10 nw">昨日退款Money</i>
            </p>
          </div>
        </li>
        <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
          <p class="flex column">
            <i>设备数量</i>
            <i class="mt10 nw">{{ inf.eqCount }}台</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.eqOnlineCount }}台</i>
              <i class="mt10 nw">Online设备</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.eqOfflineCount }}台</i>
              <i class="mt10 nw">Offline Device</i>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="flex mt10">
      <div class="bg9 flex_j column cf ph100 ft20  plr20 ">
        <i>自</i>
        <i class="mt10">提</i>
        <i class="mt10">柜</i>
      </div>
      <ul class="flex ul1 ml10 flex1 cf sb">
        <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
          <p class="flex column">
            <i>销售额</i>
            <i class="mt10 nw">{{ inf.ebSalesAmount }}元</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.ebSalesAmountM }}元</i>
              <i class="mt10 nw">本月销售额</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.ebSalesAmountYD }}元</i>
              <i class="mt10 nw">昨日销售额</i>
            </p>
          </div>
        </li>
        <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
          <p class="flex column">
            <i>订单数量</i>
            <i class="mt10 nw">{{ inf.ebOrderConut }}单</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.ebOrderConutM }}单</i>
              <i class="mt10 nw">本月订单数</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.ebOrderConutYD }}单</i>
              <i class="mt10 nw">昨日订单数</i>
            </p>
          </div>
        </li>
        <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
          <p class="flex column">
            <i>退款Money</i>
            <i class="mt10 nw">{{ inf.ebRefundAmount }}元</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.ebRefundAmountM }}元</i>
              <i class="mt10 nw">本月退款Money</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.ebRefundAmountYD }}元</i>
              <i class="mt10 nw">昨日退款Money</i>
            </p>
          </div>
        </li>
        <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
          <p class="flex column">
            <i>设备数量</i>
            <i class="mt10 nw">{{ inf.ebCount }}台</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.ebOnlineCount }}台</i>
              <i class="mt10 nw">Online设备</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.ebOfflineCount }}台</i>
              <i class="mt10 nw">Offline Device</i>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="flex mt20">
      <div class="bg8 flex_j column cf ph100 ft20  plr20 ">
        <i>组</i>
        <i class="mt10">合</i>
        <i class="mt10">柜</i>
      </div>
      <ul class="flex ul1 ml10 flex1 cf sb">
        <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
          <p class="flex column">
            <i>销售额</i>
            <i class="mt10 nw">{{ inf.cbSalesAmount }}元</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.cbSalesAmountM }}元</i>
              <i class="mt10 nw">本月销售额</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.cbSalesAmountYD }}元</i>
              <i class="mt10 nw">昨日销售额</i>
            </p>
          </div>
        </li>
        <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
          <p class="flex column">
            <i>订单数量</i>
            <i class="mt10 nw">{{ inf.cbOrderConut }}单</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.cbOrderConutM }}单</i>
              <i class="mt10 nw">本月订单数</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.cbOrderConutYD }}单</i>
              <i class="mt10 nw">昨日订单数</i>
            </p>
          </div>
        </li>
        <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
          <p class="flex column">
            <i>退款Money</i>
            <i class="mt10 nw">{{ inf.cbRefundAmount }}元</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.cbRefundAmountM }}元</i>
              <i class="mt10 nw">本月退款Money</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.cbRefundAmountYD }}元</i>
              <i class="mt10 nw">昨日退款Money</i>
            </p>
          </div>
        </li>
        <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
          <p class="flex column">
            <i>设备数量</i>
            <i class="mt10 nw">{{ inf.cbCount }}台</i>
          </p>
          <p class="bdb mlr20 mtb10"></p>
          <div class="flex flex_sa">
            <p class="flex  column">
              <i>{{ inf.cbOnlineCount }}台</i>
              <i class="mt10 nw">Online设备</i>
            </p>
            <p class="bdl mlr20"></p>
            <p class="flex  column">
              <i>{{ inf.cbOfflineCount }}台</i>
              <i class="mt10 nw">Offline Device</i>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <p class="ft20 mt20">DataStatistics</p>
    <div class="mt20" v-if="role != 4">
      <r-search
        :searchForm="searchForm"
        :searchHandle="searchHandle"
        :searchData="searchData"
      />
    </div>
    <div class="block mtb20">
      <el-date-picker
        v-model="value"
        type="daterange"
        range-separator="-"
        start-placeholder="Start Date"
        value-format="yyyy-MM-dd"
        @change="changedeta"
        end-placeholder="End Date"
      >
      </el-date-picker>
      <el-button type="primary" @click="value = ''">Reset</el-button>
    </div>

    <r-table
      style="height:400px"
      :isSelection="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>

    <div class="mod-demo-echarts mt20">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <div id="J_chartLineBox" class="chart-box"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import CountTo from "vue-count-to";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  components: {
    CountTo
  },
  data() {
    return {
      chartLine: null,
      inf: {},
      value: [],
      role: "",
      searchData: {
        regionalId: "",
        mchId: ""
      },
      searchForm: [
        {
          type: "select",
          prop: "regionalId",
          placeholder: "Agent",
          width: 150,
          isShow: e => (sessionStorage.getItem("role") == 3 ? false : true),
          options: []
        },
        {
          type: "select",
          prop: "mchId",
          placeholder: "商家",
          width: 150,
          isShow: e => (sessionStorage.getItem("role") == 4 ? false : true),
          options: []
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.search()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "日期",
          prop: "ydm",
          width: 100
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "生鲜柜订单",
          prop: "orderCount1"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "生鲜柜销售额",
          prop: "salesAmount1"
        },
        {
          label: "售袋订单",
          prop: "orderCount4"
        },
        {
          label: "售袋销售额",
          prop: "salesAmount4"
        },
        {
          label: "售卡订单",
          prop: "orderCount5"
        },
        {
          label: "售卡销售额",
          prop: "salesAmount5"
        },
        {
          label: "自提订单",
          prop: "orderCount2"
        },
        {
          label: "自提销售额",
          prop: "salesAmount2"
        },
        {
          label: "送货订单",
          prop: "orderCount3"
        },
        {
          label: "送货销售额",
          prop: "salesAmount3"
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      option: {}
    };
  },
  created() {},
  mounted() {
    this.role = sessionStorage.getItem("role");

    this.init();
  },
  activated() {
    // 由于给echartAdd了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize();
    }
  },
  computed: {
    ...mapState({})
  },
  methods: {
    changedeta() {
      this.init();
    },
    ...mapMutations({}),
    async init() {
      let res = await this.api.getTotal({});
      if (res) {
        this.inf = res.data;
      }

      let operatorId = "";
      let resOpt = await this.api.getOperatorList({});
      if (resOpt) {
        operatorId = resOpt.data.operatorId;
      }
      let resAgent = await this.api.getAgentList({
        userId: operatorId
      });
      let resMerchant = await this.api.getMerchantList({
        userId: operatorId
      });
      if (resAgent) {
        // this.searchForm[2].options = resAgent.data
        this.searchForm[0].options = [];
        for (let i = 0; i < resAgent.data.length; i++) {
          this.searchForm[0].options.push({
            label: resAgent.data[i].name,
            value: resAgent.data[i].agentId
          });
        }
      }
      if (resMerchant) {
        this.searchForm[1].options = [];
        for (let i = 0; i < resMerchant.data.length; i++) {
          this.searchForm[1].options.push({
            label: resMerchant.data[i].name,
            value: resMerchant.data[i].merchantId
          });
        }
      }
      this.initChartLine();
      this.search();
    },
    async search() {
      let res2 = await this.api.getTotaltable({
        ...this.tablePage,
        stime: this.value[0],
        etime: this.value[1],
        regionalId: this.searchData.regionalId, //|| sessionStorage.getItem('role')==3?sessionStorage.getItem('userId'):''
        mchId: this.searchData.mchId // || sessionStorage.getItem('role')==4?sessionStorage.getItem('userId'):''
      });
      if (res2) {
        this.tablePage.total = res2.data.total;
        this.tableData = res2.data.records;
        this.option.xAxis.data = [];
        this.option.series.map(item => (item.data = []));
        this.tableData.map(item => {
          console.log(item.ydm);
          this.option.xAxis.data.push(item.ydm);
          this.option.series[0].data.push(item.salesAmount1);
          this.option.series[1].data.push(item.salesAmount2);
          this.option.series[2].data.push(item.salesAmount3);
          this.option.series[3].data.push(item.salesAmount5);
          this.option.series[4].data.push(item.salesAmount4);
        });
        this.chartLine.setOption(this.option);
      }
    },
    initChartLine() {
      this.option = {
        title: {
          text: "Statistics折线图"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [
            "生鲜柜销售额",
            "自提销售额",
            "送货销售额",
            "售卡销售额",
            "售袋销售额"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "生鲜柜销售额",
            type: "line",
            stack: "总量",
            data: []
          },
          {
            name: "自提销售额",
            type: "line",
            stack: "总量",
            data: []
          },
          {
            name: "送货销售额",
            type: "line",
            stack: "总量",
            data: []
          },
          {
            name: "售卡销售额",
            type: "line",
            stack: "总量",
            data: []
          },
          {
            name: "售袋销售额",
            type: "line",
            stack: "总量",
            data: []
          }
        ]
      };
      this.chartLine = echarts.init(document.getElementById("J_chartLineBox"));
      this.chartLine.setOption(this.option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    }
  }
};
</script>
<style scoped>
.bdb {
  border-bottom: 1px solid #e5e5e5;
}
</style>
<style scoped lang="scss">
ul {
  li {
    min-width: 300px;
    width: 23%;
    height: 230px;
  }
}
.bg1 {
  background: #58a3f7;
}
.bg2 {
  background: #df5986;
}
.bg3 {
  background: #dea835;
}

.bg4 {
  background: #ff6699;
}

.bg5 {
  background: #fec03d;
}

.bg6 {
  background: #fb6260;
}

.bg7 {
  background: #3366cc;
}

.bg8 {
  background: #006699;
}
.bg9 {
  background: #006633;
}
.bg10 {
  background: #3399ff;
}
.border-r1 {
  padding: 5px 10px;
  border-radius: 3px;
}
.sw {
  white-space: pre-wrap;
}
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
